<template>
    <div>
        <a-button @click="showCreate = true"
            class=" bg-base text-white mt-2 select-none hover:bg-base hover:text-white">创建优惠券</a-button>
        <vxe-table align="center" :data="data" class=" mt-2">
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="amount" title="金额"></vxe-column>
            <vxe-column field="code" title="编码"></vxe-column>
            <vxe-column field="creator" title="创建人"></vxe-column>
            <vxe-column field="tokens" title="tokens"></vxe-column>
            <vxe-column field="status" title="状态"></vxe-column>
            <vxe-column field="c_type" title="类型">
                <template #default="{ row }">
                    <span v-show="row.c_type == 1">微信公众号赠送</span>
                    <span v-show="row.c_type == 2">抖音视频赠</span>
                    <span v-show="row.c_type == 3">用户购买</span>
                </template>
            </vxe-column>
        </vxe-table>
        <vxe-pager align="left" @page-change="() => { getData() }" v-model:current-page="page.currentPage"
            v-model:page-size="page.pageSize" :total="page.totalResult">
        </vxe-pager>

        <create :show="showCreate" @cancel="showCreate = false" @getData='getData' />
    </div>
</template>

<script lang='ts' setup>
import list from '@/hooks/list';
import { coupons } from '@/request/api';
import type { CouponsElement } from '@/types/coupons';
import create from './create.vue';
let showCreate = ref<boolean>(false)
const { data, page, getData, formRef, reset } = list<CouponsElement>({}, coupons, 'coupons')
</script>